<template>
    <div class="todayRecom">
        <div class="head">
            <i class="iconfont icon-fanhui" @click="down"></i>
            <div class="dateBox">
                <div class="dateNum">
                    <p>13</p>
                </div>
                <div class="dateWeek">
                    <p>星期三</p>
                </div>
            </div>
            <p class="title">今日推荐歌曲</p>
        </div>
        <div class="content">
            <div class="listHead">
                <div class="listHeadL">
                    <i class="iconfont icon-bofang1"></i>
                    <!-- <i class="iconfont icon-zanting2"></i> -->
                    <span class="playAll">播放全部</span>
                    <span class="songNum">共{{index}}首</span>
                </div>
                <div class="listHeadR">
                    <i class="iconfont icon-xiazai1"></i>
                    <span class="download">下载</span>
                </div>
            </div>
            <div class="songList">
                <ul>
                    <li v-for="(item,index) in songArr" :key="index" @click="today_arr(index)">
                        <div class="songListL">
                            <div class="songNameBox">
                                <p class="songName">{{item.title}}</p>
                                <!-- <div class="wusun">无损</div> -->
                            </div>
                            <p class="singer">{{item.author}}</p>
                        </div>
                        <span class="shumu">{{index+1}}</span>
                    </li>
                </ul>
            </div>
        </div>
       
        <div class="footer">

        </div>
    </div>
</template>

<script>
import jsonp from "jsonp";
export default {
  name: "todayRecom",
  data() {
    return {
      index: "30",
      songArr: []
    };
  },
  methods: {
    down() {
      this.$router.go(-1);
      this.$store.commit("changeIsplayMap", false);
    },
    today_arr(index) {
      this.$store.commit("agemusicArr", this.songArr);
      this.$store.commit("agemusicArrIndex",index);
      this.$store.commit("ageisplayicon",true);
    }
  },
  created() {
    jsonp(
      "http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.getRecommandSongList&song_id=877578&num=" +
        this.index,
      null,
      (err, res) => {
        if (!err) {
          this.songArr = res.result.list;
        } else {
          console.log(err);
        }
      }
    );
  },
  computed: {
    // date:new Date;
  }
};
</script>

<style lang="scss" scoped>
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 0;
}
.todayRecom {
  width: 100%;
  height: 100%;

  .head {
    width: 100%;
    height: 21%;
    // background: url(../../public/img/myRecomBG.jpg) repeat;
    background: peru;
    background-size: 100% 100%;
    overflow: hidden;
    .icon-fanhui {
      font-size: 1rem;
      color: #fff;
      float: left;
      margin-top: 0.2rem;
    }
    .dateBox {
      margin: 0 auto;
      width: 1.5rem;
      height: 1.8rem;
      background: #fff;
      border-radius: 0.15rem;
      padding-top: 0.03rem;
      box-sizing: border-box;
      margin-top: 1rem;
      .dateNum {
        width: 1.4rem;
        height: 1.2rem;
        line-height: 1.2rem;
        background: #868280;
        border-radius: 0.1rem;
        margin: 0 auto;
        text-align: center;
        > p {
          font-size: 1rem;
          color: #fff;
        }
      }
      .dateWeek {
        > p {
          font-size: 0.38rem;
          color: #868280;
          text-align: center;
        }
      }
    }
    .title {
      font-size: 0.4rem;
      color: #fff;
      text-align: center;
      padding-top: 0.3rem;
    }
  }
  .content {
    width: 100%;
    height: 69%;
    overflow: auto;
    .listHead {
      width: 100%;
      height: 1.5rem;
      line-height: 1.5rem;
      padding: 0 0.4rem;
      box-sizing: border-box;
      .listHeadL {
        float: left;
        .icon-bofang1 {
          font-size: 0.9rem;
          color: #000;
          vertical-align: 0.08rem;
        }
        .playAll {
          font-size: 0.6rem;
          color: #000;
          padding: 0 0.3rem;
          vertical-align: 0.1rem;
        }
        .songNum {
          font-size: 0.5rem;
          color: #666666;
          vertical-align: 0.1rem;
        }
      }
      .listHeadR {
        float: right;
        .icon-xiazai1 {
          font-size: 0.7rem;
          color: #666666;
        }
        .download {
          font-size: 0.5rem;
          color: #666666;
        }
      }
    }
    .songList {
      width: 100%;
      ul {
        width: 100%;
        li {
          width: 100%;
          overflow: hidden;
          padding: 0.5rem 0.4rem;
          box-sizing: border-box;
          border-top: 0.01rem solid #e5e5e5;
          .songListL {
            float: left;
            .songNameBox {
              position: relative;
              text-align: left;
              overflow: hidden;
              .songName {
                width: 6rem;
                font-size: 0.55rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .wusun {
                display: inline-block;
                width: 0.9rem;
                height: 0.45rem;
                line-height: 0.5rem;
                text-align: center;
                border: 0.02rem solid #da723a;
                color: #da723a;
                border-radius: 0.08rem;
                font-size: 0.2rem;
                position: absolute;
                top: 0.15rem;
                left: 1.3rem;
              }
            }
            .singer {
              width: 6rem;
              font-size: 0.4rem;
              color: #999999;
              text-align: left;
              padding-top: 0.07rem;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .shumu {
            float: right;
            font-size: 0.7rem;
            color: #999999;
          }
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 10%;
  }
}
</style>


